<template>
  <div class="app-container">



    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
      <el-form-item label="卡券ID" >
        <el-input size="small" clearable v-model="keyword.cardId" placeholder="卡券ID"></el-input>
      </el-form-item>

      <el-form-item label="卡券名称" >
        <el-input size="small" clearable v-model="keyword.cardName" placeholder="卡券名称"></el-input>
      </el-form-item>
      <el-form-item label="卡券类型" >
        <el-select v-model="keyword.cardType" placeholder="卡券类型">
          <el-option label="优惠券" value="1"></el-option>
          <el-option label="储值卡" value="2"></el-option>
          <el-option label="计次卡" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" >
        <el-select v-model="keyword.status" placeholder="状态">
          <el-option label="启用" value="1"></el-option>
          <el-option label="过期" value="2"></el-option>
          <el-option label="禁用" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="searchEmp()" icon="el-icon-search">查询</el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
      <el-button type="primary" size="small" @click="dialogFormVisible = true" icon="el-icon-plus" style="float: right">新增卡券</el-button>
    </el-form>

    <el-table
      :data="unitList"
      v-loading="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      stripe
      style="width: 100% "
      @selection-change="handleSelectionChange"
    >
<!--      <el-table-column-->
<!--        type="selection"-->
<!--        width="55"-->
<!--      >-->
<!--      </el-table-column>-->
      <el-table-column prop="cardId" label="卡券ID" width="80">
      </el-table-column>
      <el-table-column prop="cardName" label="卡券名称"></el-table-column>
      <el-table-column prop="cardType" label="类型">
        <template slot-scope="scope">
          <el-tag type="success" effect="dark" v-if="scope.row.cardType==1">优惠券</el-tag>
          <el-tag type="warning" effect="dark" v-if="scope.row.cardType==2">储值卡</el-tag>
          <el-tag type="danger" effect="dark" v-if="scope.row.cardType==3">计次卡</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="有效期"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
                <el-tag type="success" effect="dark" v-if="scope.row.status==1">启用</el-tag>
                <el-tag type="warning" effect="dark" v-if="scope.row.status==2">过期</el-tag>
                <el-tag type="danger" effect="dark" v-if="scope.row.status==3">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑
          </el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="handleDelete(scope.$index, scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="新增卡券" :visible.sync="dialogFormVisible">
      <el-form :model="form">
<!--        <el-form-item label="卡券ID" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.cardId" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="卡券名称" :label-width="formLabelWidth">
          <el-input v-model="form.cardName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="卡券类型" :label-width="formLabelWidth">
          <el-select v-model="form.cardType" placeholder="请选择优惠券类型">
            <el-option :value="1" label="优惠券"></el-option>
            <el-option :value="2" label="储值卡"></el-option>
            <el-option :value="3" label="计次卡"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.endTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
<!--        <el-form-item label="创建时间" :label-width="formLabelWidth">-->
<!--          <el-date-picker-->
<!--            v-model="form.createTime"-->
<!--            type="date"-->
<!--            placeholder="选择日期">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
        <el-form-item label="卡券状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option :value="1" label="启用"></el-option>
            <el-option :value="2" label="过期"></el-option>
            <el-option :value="3" label="禁用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEmp()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改卡券" :visible.sync="dialogUpdateVisible">
      <el-form :model="form">
<!--        <el-form-item label="卡券ID" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.cardId" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="卡券名称" :label-width="formLabelWidth">
          <el-input v-model="form.cardName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="卡券类型" :label-width="formLabelWidth">
          <el-select v-model="form.cardType" placeholder="请选择优惠券类型">
            <el-option :value="1" label="优惠券"></el-option>
            <el-option :value="2" label="储值卡"></el-option>
            <el-option :value="3" label="计次卡"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.endTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
<!--        <el-form-item label="创建时间" :label-width="formLabelWidth">-->
<!--          <el-input v-model="form.createTime" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="卡券状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option :value="1" label="启用"></el-option>
            <el-option :value="2" label="过期"></el-option>
            <el-option :value="3" label="禁用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false"
        >取 消
        </el-button>
        <el-button type="primary" @click="updateUnit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入api/unit.js中定义接口
import { unitPage, updateMeasure, delById, addMeasure, delBatch } from '@/api/couponList'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      unitList: [],
      listLoading: true,
      dialogFormVisible: false,
      dialogUpdateVisible: false,
      form: {
        cardId: '',
        cardName: '',
        cardType: '',
        endTime: '',
        createTime: '',
        status: null
      },
      keyword: {
        cardId: '',
        cardName: '',
        cardType: '',
        status: null
      },
      formLabelWidth: '120px',
      currentPage: 1,
      total: 0,
      pageSize: 5,
      ids: [],
      name: '',
      dialogExcelVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      // listEmp().then((response) => {
      //     this.empList = response.data;
      //     this.listLoading = false;
      // });
      unitPage({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        cardId: this.keyword.cardId,
        cardName: this.keyword.cardName,
        cardType: this.keyword.cardType,
        status: this.keyword.status

      }).then((response) => {
        console.log(response)
        this.unitList = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    searchEmp() {
      this.fetchData()
    },
    // 添加
    addEmp() {
      addMeasure(this.form).then((response) => {
        console.log('打印添加的回调', response)
        if (response.code == 200) {
          this.dialogFormVisible = false
          this.fetchData()
          // this.form = null
        }
      })
    },
    // 修改员工
    updateUnit() {
      updateMeasure(this.form).then((response) => {
        if (response.code == 200) {
          this.dialogUpdateVisible = false
          this.fetchData()
        }
      })
    },
    // 回显修改框的数据
    handleEdit(index, row) {
      console.log(index, row)
      this.dialogUpdateVisible = true
      this.form = row
      // findunitById(row.id).then((response) => {
      //   this.form = response.data // 将查询出来的数据 赋值给表单
      //   this.dialogUpdateVisible = true
      // })
    },
    handleDelete(index, row) {
      console.log(row.cardId)
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delById({ cardId: row.cardId }).then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 每页显示的记录数发生变化触发的操作
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.fetchData()
    },
    // 当前页发生变化触发的操作
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.fetchData()
    },
    // 获取批量删除的id
    handleSelectionChange(val) {
      console.log(val)
      this.ids = []
      for (var i = 0; i < val.length; i++) {
        this.ids.push(val[i].id)
      }
      console.log(this.ids)
    },
    deleteBatch() {
      // 提示，自行处理
      if (this.ids.length == 0) {
        alert('请选择至少一条数据')
        return
      }
      delBatch(this.ids.join(',')).then(response => {
        this.fetchData()
      })
    },
    // 重置
    resetSearchForm() {
      this.keyword.id = ''
      this.keyword.cardName = ''
      this.keyword.cardType = ''
      this.keyword.status = ''
      this.fetchData()
    }

  }

}
</script>
